<template>
  <view>
    <view class="prefer-posi">
      <!-- 筛选 -->
      <view class="delica-view">
        <view class="delica-list delica-grow" @click.prevent="multiple()">
          <text>{{ synthesize }}</text>
          <image src="../../../static/coen/排序.svg" mode="widthFix"></image>
        </view>
        <view class="delica-grow" @click.prevent="saLes()">销量高</view>
        <view class="delica-grow" @click.prevent="saLes()">速度快</view>
        <view class="delica-grow" @click.prevent="saLes()">津贴联盟</view>
        <view class="delica-list delica-right" @click.prevent="scReen()">
          <text>筛选</text>
          <image src="../../../static/coen/筛选.svg" mode="widthFix"></image>
        </view>
      </view>
      <!-- 综合排序筛选 -->
      <view class="sortlist sortliteltle" v-if="drop">
        <block v-for="(item, index) in sortlist" :key="index">
          <text
            :class="{ actived: index == num }"
            @click.prevent="sortClick(index, item.name, item.screen, item.nums)"
            >{{ item.name }}</text
          >
        </block>
      </view>
      <!-- 多个筛选区 -->
      <view class="sortlist sortlist-view" v-if="sortmen">
        <!-- 多选 -->
        <block v-for="(item, index) in screendata" :key="index">
          <view>
            <view class="sortlist-title">{{ item.title }}</view>
            <view class="sortlist-flex">
              <block v-for="(itemdata, indexs) in item.datas" :key="indexs">
                <text
                  class="Choice"
                  :class="{ scractive: itemdata.id === 2 }"
                  @click="screenchoIce(indexs, itemdata.sign)"
                  >{{ itemdata.name }}</text
                >
              </block>
            </view>
          </view>
        </block>
        <!-- 单选 -->
        <block v-for="(item, index) in person" :key="index">
          <view>
            <view class="sortlist-title">{{ item.title }}</view>
            <view class="sortlist-flex">
              <block v-for="(itemdata, indexs) in item.datas" :key="indexs">
                <text
                  class="Choice"
                  :class="{ scractive: indexs === surnum }"
                  @click.prevent="personchoIce(indexs, itemdata.per)"
                  >{{ itemdata.name }}</text
                >
              </block>
            </view>
          </view>
        </block>
        <!-- 置顶 -->
        <view class="sortlist-bottom">
          <text @click.prevent="emPty()">清空</text>
          <text @click.prevent="flag && compLete()" :class="{ flagClass: !flag }">确定</text>
        </view>
      </view>
      <!-- 透明背景 -->
      <view class="ying" v-if="ying" @click.prevent="backClic()"></view>
    </view>
  </view>
</template>
<script>
//引入post请求
import { publicing } from "../../../api/api";
import { startingurl, multipleurl } from "../../../api/request";

export default {
  data() {
    return {
      flag: false,
      synthesize: "综合排序",
      multiobj: {}, //存储筛选携带参数
      drop: false, //综合排序列表是否显示
      sortmen: false, //多选框是否显示
      ying: false,
      num: 0,
      surnum: -1,
      capita: "",
      sortlist: [
        {
          name: "综合排序",
          screen: "_id",
          nums: 1,
        },
        {
          name: "起送价最低",
          screen: "delivering",
          nums: 1,
        },
        {
          name: "配送费最低",
          screen: "physical",
          nums: 1,
        },
        {
          name: "人均高到底",
          screen: "capita",
          nums: -1,
        },
        {
          name: "人均底到高",
          screen: "capita",
          nums: 1,
        },
      ],
      //多选
      screendata: [
        {
          title: "商家特色可多选",
          datas: [
            {
              id: 1,
              sign: "deliver",
              name: "配送最快",
            },
            {
              id: 1,
              sign: "duration",
              name: "0元起送",
            },
            {
              id: 1,
              sign: "physi",
              name: "免配送费",
            },
          ],
        },
      ],
      //人均价筛选
      person: [
        {
          title: "人均价",
          datas: [
            {
              name: "20元以下",
              per: {
                $lt: 20,
              },
            },
            {
              name: "20~40元",
              per: {
                $lte: 40,
                $gte: 20,
              },
            },
            {
              name: "40元以上",
              per: {
                $gt: 40,
              },
            },
          ],
        },
      ],
    };
  },
  methods: {
    saLes() {},
    //综合排序
    multiple() {
      this.drop = true;
      this.yang = true;
      this.sortmen = false;
      this.backOne();
    },

    //综合排序替换
    sortClick(index, name, screen, nums) {
      this.synthesize = name;
      this.num = index;
      this.backClic();
      this.getStarTing(screen, nums);
    },
    //综合排序请求
    getStarTing(screen, nums) {
      let Data = {
        screen,
        nums,
      };
      publicing(startingurl, Data)
        .then((res) => {
          this.$store.commit("screenmuta", res.data);
          // console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //销量，速度，津贴
    sales() {
      this.backClic();
    },
    //筛选
    scReen() {
      this.drop = false;
      this.sortmen = !this.sortmen;
      this.yang = !this.yang;
      this.backOne();
    },

    //透明背景
    backOne() {
      setTimeout(() => {
        this.ying = true;
      }, 80);
    },

    //隐藏透明背景
    backClic() {
      this.ying = false;
      this.drop = false;
      this.sortmen = false;
    },
    //商家特色筛选
    screenchoIce(indexs, sign) {
      if (this.screendata[0].datas[indexs].id == 1) {
        //选中
        this.screendata[0].datas[indexs].id = 2;
        this.$set(this.multiobj, sign, sign);
      } else {
        this.screendata[0].datas[indexs].id = 1;
        this.$delete(this.multiobj, sign);
      }
    },
    //人均价(单选)
    personchoIce(indexs, name) {
      if (this.surnum == indexs) {
        //未选中
        this.surnum = -1;
        this.$delete(this.multiobj, "capite");
      } else {
        this.surnum = indexs;
        this.$set(this.multiobj, "capite", name);
        console.log(this.multiobj)
      }
    },
    //清空
    emPty() {
      this.screendata.forEach((item) => {
        let arr = item.datas.map((items) => {
          items.id = 1;
          return items;
        });
      });
      this.surnum = -1;
      this.multiobj = {};
      this.yang = false;
    },
    //确定（发送请求）
    compLete() {
      this.backClic();
      publicing(multipleurl, this.multiobj)
        .then((res) => {
          console.log(res)
          this.$store.commit("screenmuta", res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  //没有筛选条件，确定按钮禁用
  computed: {
    //this.multiobj为空禁止点击
    emptyIng() {
      let obj = JSON.stringify(this.multiobj) == "{}";
      obj ? (this.flag = false) : (this.flag = true);
    },
  },
};
</script>

<style scoped>
.prefer-posi {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99;
}

/* 筛选 */
.delica-view image {
  width: 30upx;
  height: 30upx;
  display: block;
  margin: 0 2upx;
}

.delica-view {
  font-size: 30upx;
  display: flex;
  align-items: center;
  color: #666666;
  height: 70upx;
  padding: 0 15upx;
  background: #eeeeee;
}

.delica-list {
  display: flex;
  align-items: center;
}

.delica-right {
  justify-content: flex-end;
  flex-grow: 5;
}

.delica-grow {
  flex-grow: 1;
}

/* 综合排序筛选 */
.sortlist {
  background: #ffffff;
}

.sortliteltle {
}

.sortliteltle text {
  padding: 0 15upx;
  display: block;
  font-size: 30upx;
  height: 70upx;
  line-height: 70upx;
  border-top: 1rpx solid #ededed;
}

.activeb {
  color: #f89903 !important;
}

/* 多筛选区 */
.sortlist-view {
  height: 480upx;
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
}

.sortlist-title {
  padding: 0 15upx;
  font-size: 30upx;
  height: 60upx;
  line-height: 60upx;
}

.Choice {
  font-size: 28upx;
  background: #f8f8f8;
  height: 55upx;
  line-height: 55upx;
  color: #666666;
  width: calc((100% / 3)-15px) !important;
  margin: 7.5px;
  text-align: center;
  display: block;
  border-radius: 5upx;
}

.sortlist-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 30upx;
}

.sortlist-bottom {
  background: #ffffff;
  height: 80upx;
  border-top: 1upx solid #e4e4e4;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.sortlist-bottom text {
  flex-grow: 1;
  height: 80upx;
  line-height: 80upx;
  text-align: center;
}

.sortlist-bottom text:nth-child(1) {
  border-right: 1upx solid #e4e4e4;
}

.sortlist-bottom text:nth-child(2) {
  background: #ffd348;
}

/* 多选 */
.scractive {
  background: #fef6df !important;
  color: #f29909 !important;
}

.ying {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.flagClass {
  color: #c8c7cc;
}
</style>
